<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<include file="Public/head"/>
<script type="text/javascript">
var WeiPHPMid = '{$mid}';
var DiyPageId = {:I('get.id')};
</script>
</head>
<body id="actionLayoutBody">
<include file="Public/header"/>
<block name="body">
  <link href="{:ADDON_PUBLIC_PATH}/css/jquery-ui.css?v={:SITE_VERSION}" rel="stylesheet" type="text/css">
  <link href="{:ADDON_PUBLIC_PATH}/css/diy.css?v={:SITE_VERSION}" rel="stylesheet" type="text/css">
  <div id="main-container" class="container" style="min-height: 402px;">
    <section id="contents" style="position:relative">
    	<div class="action_wrap">
      	<div class="sider"> 
            <a class="background" id="changeBg">更换背景</a> 
            <a class="module" onclick="alert('还没有现成模板');">现成模板</a> 
            <!--
            <a class="preview" id="preview">预览</a>
            --> 
            <a class="save" id="saveLayout">保存</a> 
        </div>
        </div>
      <div class="iphone">
        <div class="i_top"></div>
        <div class="i_mid">
          <div class="area" style="<notempty name="background">background-image:url({$background});</notempty> background-repeat:no-repeat;">
            <div id="phoneArea" data-bgid="初始化背景ID"> 
              <!-- 模板预填充输出 -->
              
              <volist name="layouts" id="layout"> 
                <!-- 每行的布局处理 -->
                
                <div data-type="{$layout.type}" class="layout_row">
                  <volist name="layout.widgets" id="widget"> 
                  <!-- 每个布局里的模块处理 -->

                 <empty name="widget.widget_id">
                 <div class="layout_item">
                     <div class="item_content"></div>                 
                 </div>
                 <else />
                  <div class="layout_item function_edit" 
                      data-param="" 
                      data-name="{$widget.widget_name}" data-id="{$widget.widget_id}" 
                      data-set= "{:addons_url("Diy://Diy/param", array('widget'=>$widget[widget_name]))}" 
                      data-html="{:addons_url("Diy://Widget/getTemplateCode")}" 
                      data-save="{:addons_url("Diy://widget/saveTemplateCode")}">
						<!--模块具体的HTML输出-->                     
                    	<div class="item_content">{$widget.html}</div>
                  </div>
                  </empty>
                  
                  </volist>
                  <!-- 每个布局里的模块处理 end-->
                </div>
                <!-- 每行的布局处理 end-->
              </volist>
            </div>
            <div class="add_layout">添加布局单元</div>
            
          </div>
        </div>
        <div class="i_bottom"></div>
      </div>
    </section>
  </div>
  <!-- 布局对话框 -->
  <div id="layoutModule" class="diy_dialog">
    <h6>布局管理<span class="dialog_close">X</span></h6>
    <div class="content">
    	<span style="padding-left:20px">请选择一个布局</span>
    	<div class="sys_layout">
          <div class="layout" data-type="1"> <img src="{:ADDON_PUBLIC_PATH}/img/layout_1.png" />通栏布局 </div>
          <div class="layout" data-type="1:1"> <img src="{:ADDON_PUBLIC_PATH}/img/layout_1-1.png" />1:1布局 </div>
          <div class="layout" data-type="1:2"> <img src="{:ADDON_PUBLIC_PATH}/img/layout_1-2.png" />1:2布局 </div>
          <div class="layout" data-type="1:3"> <img src="{:ADDON_PUBLIC_PATH}/img/layout_1-3.png" />1:3两栏布局 </div>
          <div class="layout" data-type="1:1:1"> <img src="{:ADDON_PUBLIC_PATH}/img/layout_1-1-1.png" />1:1:1布局 </div>
          <div class="layout" data-type="1:1:1:1"> <img src="{:ADDON_PUBLIC_PATH}/img/layout_1-1-1-1.png" />1:1:1:1布局</div>
      	</div>
      	<div class="form-item" style="padding-left:20px;">
            <label class="item-label" style="width:auto">也可以自定义布局:<span class="check-tips"></span></label>
            <div class="controls">
                <input style="width:100px" type="text" name="type" id="selfType" class="text input-large" value="">
                <span class="check-tips" style="color:#aaa">示例：1:1:1为三等分布局，1:2为1比2两栏布局，请谨慎填写！</span>
                <br/>
                <button type="button" id="confirmLayout" class="btn submit-btn" target-form="form-horizontal">确 定</button>
            </div>
        </div>
    </div>
  </div>
  <!-- 功能对话框 -->
  <div id="functionModule" class="diy_dialog">
    <h6>添加功能模块<span class="dialog_close">X</span></h6>
    <div class="content">
    <volist name="widget_list" id="vo">
      <div class="function" data-name="{$vo.name}" data-save="{$vo.save}" data-html="{$vo.html}" data-set="{$vo.set}"><div class="icon"><img src="{$vo.icon}"/></div>{$vo.title}</div>
    </volist>
  </div>
  </div>
  <!-- 背景对话框 -->
  <div id="bgModule" class="diy_dialog">
    <h6>设置背景<span class="dialog_close">X</span></h6>
    <div class="content" style="padding:20px 55px"> 
      <!--
        	<div class="sys_piclist">
            	<div class="bg_item no_bg" data-name="bg_no">无背景</div>
                
                <for start='1' end='12' name='j' step='1' comparison='lt'>
                    <div class="bg_item" data-name="bg_{$j}"><img src="{:ADDON_PUBLIC_PATH}/img/bg/{$j}.jpg"/></div>
                </for>
                
            </div>
            -->
      <div class="form-item cf self_bg_item">
        <label class="item-label">自定义背景图:<span class="check-tips"></span></label>
        <div class="controls uploadrow">
          <input type="file" id="bg_upload_picture_{$o_key}">
          <input type="hidden" name="imgId" id="bg_cover_id_imgId" value=""/>
          <div class="upload-img-box">
            <notempty name="form['value']">
              <div class="upload-pre-item"><img src="__ROOT__{$form['value']|get_cover='path'}"/></div>
            </notempty>
          </div>
        </div>
        <script type="text/javascript">
                    //上传图片
                    /* 初始化上传插件 */
                    $("#bg_upload_picture_{$o_key}").uploadify({
                        "height"          : 120,
                        "swf"             : "__STATIC__/uploadify/uploadify.swf",
                        "fileObjName"     : "download",
                        "buttonText"      : "上传图片",
                        "uploader"        : "{:U('home/File/uploadPicture',array('session_id'=>session_id()))}",
                        "width"           : 120,
                        'removeTimeout'	  : 1,
                        'fileTypeExts'	  : '*.jpg; *.png; *.gif;',
                        "onUploadSuccess" : uploadPicture{$o_key}
                    });
					
                    function uploadPicture{$o_key}(file, data){
                        var data = $.parseJSON(data);
                        var src = '';
                        if(data.status){
							$("#bg_cover_id_imgId").val(data.id);
                            src = data.url || '__ROOT__' + data.path;
                            $("#bg_cover_id_imgId").parent().find('.upload-img-box').html(
                                '<div class="upload-pre-item"><img width="120" height="120" src="' + src + '"/></div>'
                            );
                        } else {
                            var tips = $("#bg_cover_id_imgId").parents('.form-item').find('.check-tips');
                            tips.html(data.info).show();
                            setTimeout(function(){
                                tips.html('').hide();
                                $(that).removeClass('disabled').prop('disabled',false);
                            },1500);
                        }
                    }
                </script> 
      </div>
      <div class="controls">
        <button type="button" id="confirm" class="btn submit-btn ajax-post" target-form="form-horizontal">确 定</button>
      </div>
    </div>
  </div>
  <!-- 配置对话框 -->
  <div id="setDialog" class="diy_dialog">
    <h6>模块编辑<span class="dialog_close">X</span></h6>
    <!--<div class="content dialog_loading"  style="padding:0;"></div>-->
    <iframe id="paramIframe" width="900" height="500" frameborder="0"></iframe>
  </div>
  <div class="dialog_layer"></div>
</block>
<block name="script"> 
  <script src="{:ADDON_PUBLIC_PATH}/js/jquery-ui.min.js" type="text/javascript"></script>
  <script src="__JS__/m/flipsnap.min.js?v={:SITE_VERSION}" type="text/javascript"></script>  
  <script src="__JS__/m/mobile_module.js?v={:SITE_VERSION}" type="text/javascript"></script> 
  <script src="{:ADDON_PUBLIC_PATH}/js/diy.js?v={:SITE_VERSION}" type="text/javascript"></script> 
  <script type="text/javascript">
  	$(function(){
		$('.layout_row').each(function(index, element) {
            initItemLayoutAndAction($(this),$(this).data('type'),true);
        });
		})
  </script>
</block>
</body>
</html>